<template>
  <div>
    <el-table :data="list" border style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <div v-for="(item) in props.row.orderlist" :key="item.id" class="item">
                <img :src="item.img" alt="">
                <span>{{ item.name }}</span>
                <el-tag size="small">{{ item.list[item.idx].spec }} × {{ item.num }}</el-tag>
                <span>{{ item.list[item.idx].price*item.num }}</span>
              </div>

            </el-form-item>
            <!-- <el-form-item label="总价">
              <span>￥ {{ props.row.allPrice }}</span>
            </el-form-item> -->
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="username" type="index" />
      <el-table-column prop="objectId" label="订单编号" min-width="120" />
      <el-table-column prop="createdAt" label="下单时间" min-width="120" />
      <el-table-column prop="deliveryTime" label="配送时间" min-width="150 " />
      <el-table-column prop="username" label="姓名" w />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="address" label="地址" />
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-button v-if="scope.row.confirm == '1'" size="mini" type="success">已接单</el-button>
          <el-button v-if="scope.row.confirm == '2'" size="mini" type="warning">派送中</el-button>
          <el-button v-if="scope.row.confirm == '3'" size="mini" type="danger">已送达</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="info" @click="hanleSet(scope.row,scope.$index)">设置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑状态 -->
    <el-dialog title="设置状态" :visible.sync="dialogFormVisible">
      <el-radio-group v-model="state">
        <el-radio-button label="已接单" value="1" />
        <el-radio-button label="派送中" value="2" />
        <el-radio-button label="已送达" value="3" />
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import utctobeijing from '@/utils/utctobeijing.js'
export default {
  inject: ['reload'],
  data() {
    return {
      list: null,
      dialogFormVisible: false,
      state: '已接单',
      objectId: '',
      index: '' // 保存设置的下标
    }
  },
  created() {
    this.$get('/1.1/classes/order?where={"confirm":{"$nin":["0","100"]}}&order=-createdAt').then(res => {
      res.data.results.forEach(el => {
        el.createdAt = utctobeijing(el.createdAt)
      })
      this.list = res.data.results
      // console.log(this.list)
    })
  },
  methods: {
    // 设置id
    hanleSet(row, index) {
      this.index = index
      this.objectId = row.objectId
      this.dialogFormVisible = true
    },
    handleUpdate() {
      let id = '1'
      if (this.state === '已结单') {
        id = '1'
      } else if (this.state === '派送中') {
        id = '2'
      } else if (this.state === '已送达') {
        id = '3'
      }
      this.$put(`/1.1/classes/order/${this.objectId}`, { 'confirm': id })
      this.list[this.index].confirm = id
      this.dialogFormVisible = false
      // this.reload()
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;

  img {
    width: 80px;
    vertical-align: middle;
  }

  .el-form-item {
    display: flex;
    align-items: center;

    .item {
      width: 500px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
